TypeScriptとVitestでユニットテストしてみた！

TypeScriptとVitestを使用した、ユニットテストの実施方法を解説します。

#Vite

#Vitest

#TypeScript

稲葉奏人

2023.05.30

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは稲葉です。最近ソフトウェアテストの学習をしていた事もあり、ソフトウェア開発において、品質保証とバグの早期発見は非常に重要だと感じました。そのためには、効果的なユニットテストが欠かせません。

なので、今回はTypeScriptとVitestを使用した、ユニットテストの実施方法を解説します。

Vitestとは

Viteネイティブの超高速ユニットテストフレームワーク。

参考資料：Vitest公式ドキュメント

また、Jest互換でTypeScriptやJSXに対するサポートもあります。

ちなみにVite(ヴィート)は、モダンなWebプロジェクトのために、より速く無駄のない開発体験を提供することを目的としたビルドツールです。

詳細につきましては、公式ドキュメントを参照ください。

Vite公式ドキュメント

実行環境の準備

はじめにTypeScriptとViteをインストールします。

yarn create vite my-vite-app --template react-ts

上記のコマンドをターミナルに入力すると、ViteとTypeScriptの実行に必要なものが諸々インストールされます。

次に以下のコマンドを入力して、Vitestをインストールします。


cd my-vite-app

yarn add -D vitest

これで必要なものが揃いました。

最後にVitestのテストAPIをimportしなくとも使用出来るように、vite.config.tsを以下のように、

/// <reference types="vitest" />
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
  },
});

tsconfig.jsonを変更します。

"compilerOptions": {
　"types": ["vitest/globals"],
}

こうすることで、import文を書かなくても｛test, expect｝などのVitestのテストAPIが使用できます。

関数の作成


export function primenumber(n: number): boolean {
if (n <= 1) return false;
for (let i = 2; i < n; i++) {
if (n % i === 0) return false;
}
return true;
}

素数を判定する関数を作ります。

ユニットテスト作成

次にテストコードを書きます。

import { primenumber } from "./prime";

describe("primenumber", () => {
  it("should return false when n is less than 1", () => {
    const result = primenumber(0);
    expect(result).toBe(false);
  });

  it("should return false when n is not a prime number", () => {
    const result = primenumber(4);
    expect(result).toBe(false);
  });

  it("should return true when n is a prime number", () => {
    const result = primenumber(7);
    expect(result).toBe(true);
  });

  it("should return true when n is a large prime number", () => {
    const result = primenumber(997);
    expect(result).toBe(true);
  });
});

ターミナルを開き以下のコマンドを実行します。